<template>
  <div class="radioGroup">
    <div v-for="(item, index) in this.options" :key="index">
      <label
        role="radio"
        aria-checked="true"
        class="lg-radio"
        :class="{
          checked: item.value == defaultValue,
          disabled: item.disabled,
        }"
      >
        {{ item.label }}

        <!--  :class="{ checked: checked, disabled: disabled }" -->
        <span class="lg-radio__icon"></span>
        <input
          type="radio"
          ref="radio"
          class="lg-radio__original"
          :value="item.value"
          @click="changes(item.value)"
          :disabled="item.disabled"
        />
      </label>
    </div>
  </div>
</template>
<script>
export default {
  name: "lg-radio",
  // 自定义v-model，使用change事件更新defaultValue的值
  model: {
    prop: "defaultValue",
    event: "change",
  },
  props: {
    //  options: [单选的参数数组  如:[{name:"张三",value:0}] ]
    options: {
      type: Array,
      required: true,
    },
    // 选中的值绑定
    defaultValue: {
      type: [String, Number],
      required: true,
    },
    // 是否 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否横排排列
    isCol: {
      type: Boolean,
      default: false,
    },

    // label: {
    //   type: [Number, String],
    //   required: true,
    // },
    // // 这里的model指的是上面定义的v-model的prop  绑定的数据类型 数字或者 字符串  必填！
    // model: {
    //   type: [Number, String],
    //   required: true,
    // },
    // // 是否 禁用
    // disabled: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    // select() {
    //   this.$emit("change", this.$refs.radio.value);
    // },
    changes(e) {
      // this.$emit("change", e);

      this.$emit("change", e);
      console.log("触发了选中事件");
    },
  },
  watch: {
    // 监听model值的改变，以便更新checked的值
    defaultValue: function (val) {
      console.log("触发WATCH");
      // console.log(this.label, "labellll");
      this.options.forEach((v) => {
        console.log(val, "valll");
        console.log(v.value, "value");
        this.checked = val == v.value;
      });
    },
  },
  mounted() {
    this.changes(this.defaultValue);
  },
};
</script>

<style scoped >
.lg-radio {
  font-size: 14px;
  color: #4a4949;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  display: inline-block;
  text-align: left;
  margin: 0 20px 0 0;
}
.lg-radio.checked {
  color: #21b4e0;
}
.lg-radio.disabled {
  border-color: #ccc;
  opacity: 0.6;
  cursor: no-drop;
}
.lg-radio__icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid #c5c5c5;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -2px;
  position: relative;
}
.lg-radio__icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  top: 3px;
  left: 3px;
  background: rgba(33, 180, 224, 0);
  transform: scale(0);
  transition: all 0.5s ease;
}
.lg-radio.checked .lg-radio__icon {
  border-color: #21b4e0;
}
.lg-radio.checked .lg-radio__icon::after {
  background: rgba(33, 180, 224, 1);
  transform: scale(1);
}
.lg-radio__original {
  display: none;
  outline: medium none !important;
}
</style>
